<template>
    <div v-if="isMobile" class="md-ads" ref="adContainer">
            <div class="md-ads-close" @click="handleClose">
                <el-icon><ArrowDownBold /></el-icon>
            </div>
            <GoogleAdCollect
                id="5753773566"
                adm-id="div-gpt-ad-1747196658722-0"
                name="APK_Bottom_Banner"
                height="50px"
                :parent-page="parentPage"
                :anchor-ad="true"
                @adSuccess="handleAdSuccess"
                @adError="handleAdError"
            />
        </div>
</template>

<script setup>
import GoogleAdCollect from '@/components/GoogleAdCollect.vue'
const props = defineProps({
	parentPage: {
		type: String,
		required: true,
	}
});
// 判断是否为移动端
const isMobile = ref(false)
const adContainer = ref(null)
const isClosed = ref(false)

const handleClose = () => {
    isClosed.value = !isClosed.value
    if (adContainer.value) {
        adContainer.value.style.transform = isClosed.value ? 'translateY(80px)' : 'translateY(0)'
    }
}
onMounted(() => {
    isMobile.value = window.innerWidth < 768
    window.addEventListener('resize', () => {
        isMobile.value = window.innerWidth < 768
    })
})
const handleAdSuccess = () => {
  console.log('广告加载成功')
    // if (adContainer.value) {
    //     adContainer.value.style.transform = 'translateY(0)'
    // }
}
const handleAdError = () => {
  console.log('广告加载失败')
    if (adContainer.value) {
        adContainer.value.style.transform = 'translateY(110px)'
    }
}
</script>

<style scoped lang="scss">
.md-ads {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
    background: #F78B17;
    width: 100%;
    padding: 5px 0;
    transition: transform 0.8s ease-in-out;
    /* transform: translateY(110px); */
    .md-ads-close {
        position: absolute;
        top: -15px;
        left: 0;
        background: #F78B17;
        color:white;
        padding: 0 6px;
        border-top-right-radius: 5px;
    }
    :deep(.ad-label) {
        color: white;
    }
}
</style>